<div class="user_container">
  <div class="row">
    <div class="col-md-1">用户名</div>
    <div class="col-md-2 username"></div>
  </div>
  <div class="row" style="position: relative;">
    <div class="col-md-1">姓名</div>
    <div class="col-md-2 realname"></div>
    <img src="http://134.175.154.93:8888/group1/M00/00/20/rBAACV3SWCmADYOQAABJRZlrGTM789.jpg" alt="" style="width: 150px; height: 150px; border-radius: 50%; position: absolute; left: 350px; top:0;">
  </div>
  <div class="row">
    <div class="col-md-1">手机号</div>
    <div class="col-md-2 telephone"></div>
  </div>
  <div class="row">
    <div class="col-md-1">性别</div>
    <div class="col-md-2 gender"></div>
  </div>
  <div class="row">
    <div class="col-md-1">注册时间</div>
    <div class="col-md-2 registerTime"></div>
  </div>
  <div class="row">
    <div class="col-md-1">状态</div>
    <div class="col-md-2 status"></div>
  </div>
  <div class="row">
    <div class='col-md-1'>
      <button class="change" data-toggle="modal" data-target='#myModal'>修改</button>
    </div>
  </div>
  
  <!--添加模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
      </div>
      <div class="modal-body">
          <form class="form-horizontal">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                  <input class="form-control user" id="disabledInput" type="text" placeholder="" disabled>
                </div>
              </div>
              <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input type="email" class="form-control real" id="inputEmail3" >
                  </div>
                </div>
              <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                  <div class="col-sm-10">
                    <input type="password" class="form-control pwd" id="inputPassword3" >
                  </div>
              </div>

              <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                  <div class="col-sm-10">
                      <div class="radio">
                          <label>
                            <input class='ger' type="radio" name="optionsRadios" id="optionsRadios1" value="男" checked>
                            男
                          </label> &nbsp;&nbsp;
                          <label>
                            <input class='ger' type="radio" name="optionsRadios" id="optionsRadios2" value="女">
                            女
                          </label>
                        </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">手机号</label>
                  <div class="col-sm-10">
                    <input type="email" class="form-control tele" id="inputEmail3" >
                  </div>
                </div>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary saveOrUpdate">保存</button>
      </div>
    </div>
  </div>
</div>
<!--模态框结束 -->

  <!-- 删除成功后的模态框 -->
  
  <div class="modal fade success-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 模态框结束 -->
</div>
<script>
var baseUrl='http://123.57.57.227:7788/';
var id,username;
  //取得用户个人信息
function getUser(){
  $.ajax({
    url:baseUrl+'user/info?token='+sessionStorage.getItem("token"),
    type:'get',
    headers:{
      "Authorization":sessionStorage.getItem("token")
    },
    success:function(data){
      // console.log(data.data)
      // console.log(data.data,data.data.id)
      
      $('.username').html(data.data.username);
      $('.realname').html(data.data.realname);
      $('.telephone').html(data.data.telephone);
      $('.gender').html(data.data.gender);
      $('.registerTime').html(data.data.registerTime);
      $('.status').html(data.data.status);

      $('.change').click(function(){
        id=data.data.id;
        username=data.data.username;
        // console.log($('.username').html())
        //给模态框设置内容
        $('.user').val($('.username').html());
        $('.real').val($('.realname').html());
        $('.tele').val($('.telephone').html());
        // $('.ger').val($('.gender').html());
        if($('.gender').html()=='女'){
            $('.ger').eq(1).prop('checked',true);
        }else{
            $('.ger').eq(0).prop('checked',true);
            $('.ger').eq(1).prop('checked',false);
        }
        $('.pwd').val(data.data.password);
        // console.log($('input:radio:checked').val());
      })
    }
  });
}
getUser();

$('.user_container .saveOrUpdate').click(function(){
  // console.log(id,username);
  var url;
  var realname=$('.real').val();
  var password=$('.pwd').val();
  // console.log(password)
  var telephone=$('.tele').val();
  // console.log(telephone)
  var gender=$('input:radio:checked').val();
  if(realname){
    if(password!=undefined && telephone!=undefined){
      url='&password='+password+'&telephone='+telephone+'&realname='+realname+'&gender='+gender;
    }else if(password && telephone==undefined){
      url='&password='+password+'&realname='+realname+'&gender='+gender;
    }else if(telephone && password==undefined){
      url='&telephone='+telephone+'&realname='+realname+'&gender='+gender;
    }else{
      url='&realname='+realname+'&gender='+gender;
    }
  }else{
    alert('必须输入姓名')
  }
  $('#myModal').modal('hide');
  // console.log(url);
  up(url);
})
function up(url){
  $.ajax({
    url:baseUrl+'baseUser/saveOrUpdate?id='+id+'&username='+username+url+'&registerTime=20201010',
    type:'post',
    headers:{
      "Authorization":sessionStorage.getItem("token")
    },
    success:function(data){
      getUser();
      suc(data);
    }
  })
}

function suc(data){
  $('.success-modal p').html(data.message);
  $('.success-modal').modal('show');
};
</script>

<style>
  .user_container .row{
    height: 32px;
    padding-top: 10px;
  }  
  .user_container .col-md-1{
    color: #666;
    font-weight: 700;
    font-size: 16px;
  }
  .user_container .col-md-2{
    color: #999;
    line-height: 23px;
    font-size: 16px;
  }
  .user_container button{
    color:#fff;
    background-color: #2cb5ac;
    font-size: 12px;
    height: 32px;
    width: 53px;
    border-style: none;
    text-align: center;
  }
   
</style>